@import "variables";

seed-view-test-scores {
  .student-info {
    background: #FFFFFF;
    height: pxTorem(190);
    padding-left: pxTorem(40);
    display: flex;
    align-items: center;
    .icon-box {
      margin-right: pxTorem(20);
      .headerImg{
        width: pxTorem(80);
        height: pxTorem(80);
        border-radius: 100%;
      }
    }
    .right-info {
      flex: 1;
      display: flex;
      height: 60%;
      flex-direction: column;
      justify-content: space-between;
      font-size: standard($f, f5);
      color: color($h5, c2);
      .age{
        font-size: standard($f, f3);
        font-weight: bold;
      }
      .nian{
        font-size: standard($f, f5);
        color: color($h5, c3);
      }
    }
  }
  .ages {
    background: #FFFFFF;
    padding: 0 pxTorem(24) 0 pxTorem(40);
    .seed-right-arrow{
      background: #FFFFFF;
      height: pxTorem(100);
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        font-size: standard($f, f2);
        color: color($h5, c2);
      }
      .age-name{
        -webkit-appearance: none;
        font-size: 14px;
        color: color($h5, c4);
        padding-right: pxTorem(40);
        flex: 1;
        height: 100%;
        border: none;
      }
    }
  }
  .train-title{
    margin-top: pxTorem(20);
    font-size: standard($f, f4);
    .title-text{
      font-weight: bold;
      color: color($h5, c2);
    }
    .rank-exp{
      color: color($h5, c13);
    }
  }
  .item-names{
    height: pxTorem(100);
    display: flex;
    align-items: center;
    background: #FFFFFF;
    padding: 0 pxTorem(40);
    p{
      flex: 1;
      font-size: standard($f, f3);
      color: color($h5, c4);
    }
    .result{
      text-align: right;
    }
  }
  .scores-list{
    background: #FFFFFF;
    font-size: standard($f, f5);
    color: color($h5, c2);
    li.score-item{
      padding: 0 pxTorem(40);
      height: pxTorem(110);
      display: flex;
      align-items: center;
      div{
        width: 33.33%;
      }
      .result{
        text-align: right;
        p.date{
          color: color($h5, c4);
          margin-bottom: pxTorem(14);
        }
      }
    }
    .no-result{
      color: color($h5, c4);
      text-align: right;
    }
  }

  .tips-text-box{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 pxTorem(75) 0 pxTorem(75);
    .text-content{
      background: #FFFFFF;
      border-radius: pxTorem(8);
      .tips-text{
        padding: pxTorem(46) pxTorem(28);
        padding-bottom: pxTorem(34);
        font-size: standard($f, f4);
        color: color($h5, c4);
        line-height: 150%;
        max-height: pxTorem(454);
        overflow-y: scroll;
        p{
          margin-top: pxTorem(26);
          margin-bottom: pxTorem(20);
          font-size: standard($f, f4);
          color: color($h5, c2);
        }
      }
      .Ikown{
        height: pxTorem(90);
        text-align: center;
        line-height: pxTorem(90);
        font-size: standard($f, f3);
        color: color($h5, c13);
      }
    }
  }
}
